<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./js/react.development.js"></script>
  <script src="./js/react-dom.development.js"></script>
  <script src="./js/babel.min.js"></script>
</head>

<body>

  <div id="app">

  </div>

  <script type="text/babel">
    /*
    jsx里的插值表达式： {}
    1. yudaojis代码使用 {} ， 如果是html 就直接写
    2. {} 里可以接受的数据类型
      2.1 : 字符串可以显示， 字符串拼接
      2.2 ： 数字  可以显示   数字运算  加减乘除   可以显示
      2.3 ： 布尔值  不显示
      2.4 undefin 和 null 不显示
      2.5  symbol  不显示
      2.6: 对象 会报错  不能直接显示
      2.7 ： 数组 可以显示
      2.8： 函数  显示和函数返还值有关
      2.9 ： if else  switch 不支持
      2.10 ： 三元运算符 支持

    */
    function fun() {
      // return "hello"
      return <div>你好</div>
    }



    let flag = true

    function fu() {
      if (flag) {
        return "111"
      } else {
        return "222"
      }
    }
    let isVIP = true;
    let week = prompt("今天周几：")
    function cxc(week) {
      switch (week) {
        case "1":
          return "麻辣香锅";
        case "2":
          return "酸菜牛肉面";
        case "3":
          return "红烧牛肉";
      }
    }

    let vdom = <div>
      我是div
      <h1>我是标题{["zhangsan", "lisi", "wangwu"]}</h1>
      {/*<h1>我是标题{{ name: "zhangsan1" }}</h1>*/}
      <h1>{fun()}</h1>
      <h1>{flag ? "zhangsan" : "lisi"}</h1>
      <h1>{fu()}</h1>
      <hr />
      <p>{isVIP ? "vip付费内容" : "广告内容"}</p>
      <hr />
      <p>今日：{week}</p>
      <hr />
      <p>今日膳食：{cxc(week)}</p>

    </div>
    let root = ReactDOM.createRoot(document.querySelector("#app"))
    root.render(vdom)



  </script>
</body>

</html>